import React from 'react'
import { Modal, Toast, ListView, PullToRefresh } from 'antd-mobile'

import {get} from '../../../axios'
import moment from 'moment'
import Rate from '../../../components/rate'

import {MyBody, genData, separator} from 'components/listview-func'
import './index.less'

export default class Score extends React.Component {
    constructor(props) {
        super(props)
        this.dataBlob = {};

		const getSectionData = (dataBlob, sectionID) => this.dataBlob[sectionID];
		const getRowData = (dataBlob, sectionID, rowID) => { return dataBlob[sectionID] ? dataBlob[sectionID][rowID] : null};
	
        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });
        this.state = {
            i: 0,
            dataSource,
            isLoading: true,
            refreshing: false,
            hasMore: true, 
            current_page: 1,
            detail: [],
            showModal: false
        }
    }

    componentDidMount() {
        this.get_score_list()
    }

    get_score_list(page=1) {
        get(`/mem/user-rank?page=${page}`).then(resp => {
            if (resp) {
                let {dataBlobs, sectionIDs, rowIDs} = genData(this.dataBlob, resp.current_page, resp.data)
                this.setState({
                    current_page: resp.current_page,
                    isLoading: false,
                    refreshing: false,
                    hasMore: resp.next_page_url!=null,
                    dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
                });
            }
        })
    }

    get_score_detail = (id) => {
        get(`/mem/user-rank/${id}`).then(resp => {
            if (resp) {
                this.setState({detail: resp.data})
            }
        })
    }

    onEndReached = (event) => {
        if (this.state.isLoading || !this.state.hasMore) {
			return;
		}
		console.log('reach end', event);
		this.setState({ isLoading: true });
		this.get_score_list(this.state.current_page+1)
    }

    onRefresh = () => {
        console.log('refresh')
        this.dataBlob = {}
        this.setState({ refreshing: true, isLoading: true }, ()=>this.get_score_list());
    }

    showDetail = id => {
        this.get_score_detail(id)
        this.setState({showModal: true})
    }

    onClose = key => () => {
        this.setState({
          [key]: false,
        });
    }

    render() {
        const row = (x, sectionID, rowID) => {
            return (
                <div class="pro-list" key={x.id} onClick={()=>this.showDetail(x.id)}>
                    <div class="pro-lt">
                        <div class="s1">{x.title}</div>
                        <div class="s2">{moment(x.created_at).format('YYYY-MM-DD hh:mm')}</div>
                    </div>
                    <div class="pro-rt">{x.total}</div>
                </div>
            )
        }
        return (
            <React.Fragment>
            <ListView
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ textAlign: 'center' }}>
                    {this.state.isLoading ? '正在加载...' : (this.state.hasMore ? '还有更多项' : '已经是最后一条记录')}
                    </div>)}
                renderBodyComponent={() => <MyBody classname='profit'/>}
                renderRow={row}
                useBodyScroll
                pageSize={5}
                onScroll={() => { console.log('scroll'); }}
                scrollRenderAheadDistance={500}
                onEndReached={this.onEndReached}
                onEndReachedThreshold={10}
                scrollerOptions={{ scrollbars: true }}
                pullToRefresh={<PullToRefresh
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}
                />}
            />
             <Modal
                visible={this.state.showModal}
                transparent
                maskClosable={false}
                onClose={this.onClose('showModal')}
                title="评价详情"
                footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('showModal')(); } }]}
                >
                {
                    this.state.detail.filter(x=>x.category=='rank').map(x=>
                        <div class="evaluate" key={x.id}>
                            <div class="bs">{x.name}</div>
                            <Rate
                                value={x.content}
                                count={6}
                                disabled={true}
                            />
                        </div>
                    )
                }
                {
                    this.state.detail.filter(x=>x.category=='text').map(x=> 
                        <p>{x.content}</p>
                    )
                }
            </Modal>
            </React.Fragment>
        )
    }
}

